<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="initial-scale=1, width=device-width">
                
        <title>[[EDITOR_HEADER]]</title>
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <body>
        <div class="header"><h1>[[EDITOR_HEADER]]</h1></div>
        <div class="menu">
            <div class="step3">
                <div class="menubar">
                    <div class="miniheader">
                        [[MENU]]
                    </div>                    
                    <button class="back">[[BACK]]</button>
                    <button class="save">[[SAVE_CUSTOM_RULE]]</button>
                    <button class="export">[[EXPORT_JSON]]</button>
                    <button class="collapse">[[COLLAPSE_ALL]]</button>
                    <button class="uncollapse">[[UNCOLLAPSE_ALL]]</button>
                    <button class="addmethod">[[ADD_METHOD]]</button>
                </div>
                
                <div class="toolbox">
                    <div class="miniheader">
                        [[DRAGGABLE_ELEMENTS]]
                    </div>                    
                    <div class="detector">
                        <div data-type="detector">[[DETECTOR]]<div class="help">[[DETECTOR_DESCRIPTION]]</div></div>
                    </div>
                    <div class="matcher">
                        <div data-type="matcher" data-variant="css">[[CSS_MATCHER]]<div class="help">[[CSS_MATCHER_DESCRIPTION]]</div></div>
                        <div data-type="matcher" data-variant="checkbox">[[CHECKBOX_MATCHER]]<div class="help">[[CHECKBOX_MATCHER_DESCRIPTION]]</div></div>
                        <div data-type="matcher" data-variant="url">[[URL_MATCHER]]<div class="help">[[URL_MATCHER_DESCRIPTION]]</div></div>
                        <div data-type="matcher" data-variant="onoff">[[ONOFF_MATCHER]]<div class="help">[[ONOFF_MATCHER_DESCRIPTION]]</div></div>
                    </div>
                    <div class="actions">
                        <div data-type="action" data-variant="click">[[CLICK_ACTION]]<div class="help">[[CLICK_ACTION_DESCRIPTION]]</div></div>
                        <div data-type="action" data-variant="multiclick">[[MULTICLICK_ACTION]]<div class="help">[[MULTICLICK_ACTION_DESCRIPTION]]</div></div>
                        <div data-type="action" data-variant="consent">[[CONSENT_ACTION]]<div class="help">[[CONSENT_ACTION_DESCRIPTION]]</div></div>
                        <div data-type="action" data-variant="list">[[LIST_ACTION]]<div class="help">[[LIST_ACTION_DESCRIPTION]]</div></div>
                        <div data-type="action" data-variant="waitcss">[[WAIT_CSS_ACTION]]<div class="help">[[WAIT_CSS_ACTION_DESCRIPTION]]</div></div>
                        <div data-type="action" data-variant="ifcss">[[IF_CSS_ACTION]]<div class="help">[[IF_CSS_ACTION_DESCRIPTION]]</div></div>
                        <div data-type="action" data-variant="ifallowall">[[IF_ALLOW_ALL_ACTION]]<div class="help">[[IF_ALLOW_ALL_ACTION_DESCRIPTION]]</div></div>
                        <div data-type="action" data-variant="ifallownone">[[IF_ALLOW_NONE_ACTION]]<div class="help">[[IF_ALLOW_NONE_ACTION_DESCRIPTION]]</div></div>
                        <div data-type="action" data-variant="foreach">[[FOR_EACH_ACTION]]<div class="help">[[FOR_EACH_ACTION_DESCRIPTION]]</div></div>
                        <div data-type="action" data-variant="slide">[[SLIDE_ACTION]]<div class="help">[[SLIDE_ACTION_DESCRIPTION]]</div></div>
                        <div data-type="action" data-variant="close">[[CLOSE_ACTION]]<div class="help">[[CLOSE_ACTION_DESCRIPTION]]</div></div>
                        <div data-type="action" data-variant="hide">[[HIDE_ACTION]]<div class="help">[[HIDE_ACTION_DESCRIPTION]]</div></div>
                        <div data-type="action" data-variant="wait">[[WAIT_ACTION]]<div class="help">[[WAIT_ACTION_DESCRIPTION]]</div></div>
                        <div data-type="action" data-variant="runrooted">[[RUN_ROOTED_ACTION]]<div class="help">[[RUN_ROOTED_ACTION_DESCRIPTION]]</div></div>
                        <div data-type="action" data-variant="runmethod">[[RUN_METHOD_ACTION]]<div class="help">[[RUN_METHOD_ACTION_DESCRIPTION]]</div></div>
                    </div>
                    <div class="consent">
                        <div data-type="consent">[[CONSENT]]<div class="help">[[CONSENT_DESCRIPTION]]</div></div>
                    </div>
                    <div class="domSelectors">
                        <div data-type="domSelector">[[DOM_SELECTOR]]<div class="help">[[DOM_SELECTOR_DESCRIPTION]]</div></div>
                    </div>
                    <div class="trashcan">[[TRASH]]</div>
                </div>
            </div>
        </div>
        <div class="page">
            <div class="step1 loader">
                <h1>[[LOAD_RULES]]</h1>
                <div class="existing">
                    <div>
                        <h2>[[FROM_PLUGIN_SOURCE]]</h2>
                        <select id="knownRules">

                        </select>
                        <button class="loadButton">[[LOAD]]</button>
                    </div>
                    <div>
                        <h2>[[FROM_CUSTOM_RULES]]</h2>
                        <select id="customRules">

                        </select>
                        <button class="loadCustomButton">[[LOAD]]</button>
                        <button class="deleteCustomButton">[[DELETE]]</button>
                    </div>
                    <div>
                        <h2>[[FROM_PASTED_JSON]]</h2>
                        <textarea id="inputArea" cols="10" rows="8"></textarea>
                        <button class="loadTextButton">[[LOAD]]</button>
                    </div>
                </div>
                <div>
                    <h2>[[CREATE_FROM_SCRATCH]]</h2>
                    <button class="newButton">[[CREATE_NEW_RULE]]</button>
                </div>
            </div>
            <div class="step2">
                <select id="cmpSelector">

                </select>
                <button id="selectCmp">[[SELECT]]</button>
                <br />
                <button class="back">[[BACK]]</button>
            </div>

            <div class="step3">
                <h1>[[CONSENT_MANAGEMENT_PROVIDER_POPUP]]</h1>
                <div class="cmpName"><div class="label">[[NAME_OF_CMP]]<div class="help">[[NAME_OF_CMP_HELP]]</div></div><input /></div>
                <div class="rules"></div>
                <div class="help">[[DRAG_HINT]]</div>
            </div>
            <div class="step4">
                <button class="back">[[BACK]]</button>
                <pre></pre>
            </div>
        </div>
        <script src="editor.js"></script>
    </body>
</html>